<template>
	<scroll-view :scroll-y="true" class="h100" :scroll-top="state.scrollTop" scroll-with-animation>
		<view class="scrollContent" style="position: relative;">
			<template v-for="(item,index) in state.menuList" :key="item.id">
				<view class="menu" :class="{active: state.currentItem.id === item.id}" :id="`menuId-${index}`" @click="showChild(item,`menuId-${index}`)">
					{{item.classifyName}}
				</view>
				<view class="sub" v-if="item.children?.length" v-show="item.showChild" :key="item.id+'-sub'">
					<view class="subMenu" @click="clickChild(item,child)" :class="{active: state.currentItem.currentChild?.id === child.id}" v-for="child in item.children" :key="child.id">
						<text class="text">{{child.classifyName}}</text>
						<u-icon name="arrow-right" class="icon" color="#006767"></u-icon>
					</view>
				</view>
			</template>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		getCurrentInstance,
		nextTick,
		reactive
	} from 'vue';
	import request from '@/utils/request.js'
	const state = reactive({
		menuList: [],
		currentItem: '',
		scrollTop: 0
	})
	const emits = defineEmits(['select'])
	const getClass = () => {
		request({
			url:'api/goods/goodsClassifyList'
		}).then(res => {
			console.log(res)
			// state.menuList = res.filter(item => item.children?.length);
			state.menuList = res;
			state.currentItem = state.menuList[0]
			state.currentItem.showChild = true
			if(state.currentItem.children?.length) {
				state.currentItem.currentChild = state.currentItem.children[0]
			}
			emits('select',state.currentItem.children ? state.currentItem.children[0] : state.currentItem)
		})
	}
	getClass()
	// 选择子类
	const clickChild = (father,child) => {
		state.currentItem = father
		if(father.currentChild?.id === child.id) return;
		father.currentChild = child
		emits('select',child)
	}
	const getBound = (selector) => {
		return new Promise((resolve,reject) => {
			uni.createSelectorQuery().in(instance).select(selector).boundingClientRect(data => {
				resolve(data)
			}).exec()
		})
	}
	const instance = getCurrentInstance()
	// 展示子类
	const showChild = (item,menuId) => {
		state.currentItem = item
		if(item.children?.length) {
			item.showChild = !item.showChild;
		}else {
			emits('select',item)
		}
		nextTick(async () => {
			const [box,item] = await Promise.all([getBound('.scrollContent'),getBound(`#${menuId}`)])
			const distance = item.top - box.top;
			state.scrollTop = distance
		})
	}
</script>

<style lang="scss" scoped>
		$h: 80rpx;
	.menu {
		height: $h;
		line-height: $h;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-weight: 600;
		padding-left: 30rpx;
		font-size: 30rpx;
		transition: all .3s;
		&.active {
			color: $main-color;
			position: relative;
			&::before {
				content: '';
				width: 4rpx;
				background-color: $main-color;
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
			}
		}
	}
	.sub {
		background-color: #f5f5f5;
	}
	.subMenu {
		$sh: $h * 1;
		padding-left: 40rpx;
		height: $sh;
		line-height: $sh;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		color: grey;		
		transition: all .3s;
		.text {
			flex: 1;
		}
		.icon {
			display: none;
		}
		&.active {
			font-weight: 600;
			color: $main-color;
			.icon {
				display: block;
			}
		}
	}
</style>